{extend name="public/iframe" /}

{block name="top"}
{:load_assets('select2,form','css')}
{/block}

{block name="content"}
<div class="card card-body {eq name='layout' value='dialog'}shadow-none{/eq}">									
    <form action="" method="post" id="validate-form">
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">是否菜单</label>
            <div class="col-lg-10 col-sm-9 col-12 mt-sm-2 form-item">
                <div class="form-check  form-check-custom   form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="is_menu"  value="1" checked data-rule="是否菜单:checked"> 是
                    </label>
                </div>
                <div class="form-check  form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="is_menu"  value="0"> 否
                    </label>
                </div>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">打开方式</label>
            <div class="col-lg-10 col-sm-9 col-12 mt-sm-2 form-item">
                <div class="form-check  form-check-custom   form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="type"  value="tabs" checked data-rule="打开方式:checked"> 标签页
                    </label>
                </div>
                <div class="form-check  form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="type"  value="dialog"> 弹窗
                    </label>
                </div>
                <div class="form-check  form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="type"  value="ajax"> AJAX请求
                    </label>
                </div>
                <div class="form-check  form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="type"  value="blank"> 新页面
                    </label>
                </div>
                <div class="form-text text-muted">菜单打开的方式，不清楚就选择标签页</div>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">父级</label>
            <div class="col-xl-4 col-sm-5 col-12 form-item">
                <select class="form-select" name="pid"  data-control="select2" data-language="zh-CN" data-allow-clear="true" data-placeholder="请选择" data-rule="父级:required">
                    <option value="0">无父级</option>
                    {foreach name="rules" item="rule"}
                    <option value="{$rule.id}"  {eq name="rule.id" value="$pid"}selected{/eq}>{$rule.prefix}{$rule.title}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">规则名称</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <input type="text" class="form-control" name="title" value="" data-rule="规则名称:required;length(~20)">
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">规则标识</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <input type="text" class="form-control" name="name" value="" data-rule="规则标识:required;length(~100)">
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">描述信息</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <textarea name="desc" class="form-control" rows="2" data-rule="描述信息:length(~200)"></textarea>
            </div>
        </div>
        
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">链接地址</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <input type="text" class="form-control" name="url" value="" data-rule="链接地址:length(~150)">
                <div class="form-text text-muted">未填写则采用规则标识的内容，请填写 <span class="text-warning">控制器 / 方法</span>，或以<span class="text-warning">http://或https://</span>开头的链接地址</div>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">图标</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <input type="text" class="form-control" name="icon" value="" data-rule="图标:length(~50)">
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">同步操作</label>
            <div class="col-lg-10 col-sm-9 col-12 mt-sm-2  form-item">
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" id="check-all"> 全选
                    </label>
                </div>
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="index"> 查看
                    </label>
                </div>
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="add"> 添加
                    </label>
                </div>
                <div class="form-check  form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="edit" > 修改
                    </label>
                </div>
                <div class="form-check  form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="del"> 删除
                    </label>
                </div>
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="sort"> 排序
                    </label>
                </div>
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="detail"> 查看详情
                    </label>
                </div>
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="toggle"> 状态切换
                    </label>
                </div>
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="checkbox" name="operates[]"  value="multi"> 批量操作
                    </label>
                </div>
                <div class="form-text text-muted">创建列表菜单的时候，同时创建其他的常用操作作为其子菜单操作</div>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">状态</label>
            <div class="col-lg-10 col-sm-9 col-12 mt-sm-2 form-item">
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="status"  value="1" checked data-rule="状态:checked"> 启用
                    </label>
                </div>
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="status"  value="0"> 禁用
                    </label>
                </div>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">排序</label>
            <div class="col-lg-10 col-sm-9 col-12">
                <input type="number" class="form-control" name="sort" value="1000" data-rule="排序:required;integer;range(0~10000)">
                <span class="form-text text-muted">相同层级，数字越小越排前</span>
            </div>
        </div>
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label">规则条件</label>
            <div class="col-lg-10 col-sm-9 col-12 form-item">
                <textarea name="condition" class="form-control autosize" rows="2" data-rule="规则条件:length(~100)"></textarea>
            </div>
        </div>
        
        <div class="row mb-sm-3">
            <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">badge类型</label>
            <div class="col-lg-10 col-sm-9 col-12 mt-sm-2 form-item">
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="badge_type"  value="0" checked data-rule="badge类型:checked"> 关闭
                    </label>
                </div>
                <div class="form-check form-check-custom  form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="badge_type"  value="1"> 静态显示文本
                    </label>
                </div>
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="badge_type"  value="2"> 加载服务器的文本
                    </label>
                </div>
                <div class="form-check  form-check-custom form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input w-20px h-20px" type="radio" name="badge_type"  value="3"> 加载服务器的数字
                    </label>
                </div>
                
            </div>
        </div>
        <div class="badge_type1" style="display:none;">
            <div class="row mb-sm-3">
                <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">badge文本</label>
                <div class="col-lg-10 col-sm-9 col-12 form-item">
                    <input type="text" class="form-control" name="badge_text" value="" data-rule="badge文本:length(~10)">
                </div>
            </div>
        </div>
        <div class="badge_type2" style="display:none;">
            <div class="row mb-sm-3">
                <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">badge名称标识</label>
                <div class="col-lg-10 col-sm-9 col-12 form-item">
                    <input type="text" class="form-control" name="badge_key" value="" data-rule="badge名称标识:length(~20)">
                </div>
            </div>
        </div>
        <div class="badge_type3" style="display:none;">
            <div class="row mb-sm-3">
                <label  class="col-xxl-1 col-lg-2 col-sm-3 col-12 col-form-label required">badge颜色</label>
                <div class="col-lg-10 col-sm-9 col-12 mt-sm-2 form-item">
                    <div class="form-check  form-check-custom form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input w-20px h-20px" type="radio" name="badge_color"  value="success"> <span class="badge badge-success p-1">hot</span>
                        </label>
                    </div>
                    <div class="form-check  form-check-custom form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input w-20px h-20px" type="radio" name="badge_color"  value="danger" checked> <span class="badge badge-danger p-1">hot</span>
                        </label>
                    </div>
                    <div class="form-check  form-check-custom form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input w-20px h-20px" type="radio" name="badge_color"  value="warning"> <span class="badge badge-warning p-1">hot</span>
                        </label>
                    </div>
                    <div class="form-check  form-check-custom form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input w-20px h-20px" type="radio" name="badge_color"  value="info"> <span class="badge badge-info p-1">hot</span>
                        </label>
                    </div>
                    <div class="form-check  form-check-custom form-check-inline">
                        <label class="form-check-label">
                            <input class="form-check-input w-20px h-20px" type="radio" name="badge_color"  value="secondary"> <span class="badge badge-secondary p-1">hot</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        {include file="public/formfooter" /}
    </form>
</div>
{/block}

{block name="bottom"}
{:load_assets('select2,form','js')}
<script>
    $(function(){
        $(':input[name="badge_type"]').change(function(){
            let val = parseInt($(this).val() || 0);
            switch(val){
                case 0:
                    $('.badge_type1,.badge_type2,.badge_type3').hide();
                    $('form').validator("setField", "badge_text", null);
                    $('form').validator("setField", "badge_key", null);
                    break;
                case 1:
                    $('.badge_type1,.badge_type3').show();
                    $('.badge_type2').hide();
                    $('form').validator("setField", "badge_text", 'badge文本:required;length(~10)');
                    $('form').validator("setField", "badge_key", null);
                    break;
                case 2:
                case 3:
                    $('.badge_type1').hide();
                    $('.badge_type2,.badge_type3').show();
                    $('form').validator("setField", "badge_text", null);
                    $('form').validator("setField", "badge_key", 'badge名称标识:required;length(~20)');
                    break;
            }
        });
        $('#check-all').click(function(){
            if($(this).prop('checked')){
               $(':checkbox[name="operates[]"]').prop('checked', true);
            }else{
                $(':checkbox[name="operates[]"]').prop('checked', false);
            }
        });
    })
</script>
{/block}